<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>iLEADER</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <style>
  .study-report-main{
    padding:0 10px;
  }
  .report-user-img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .report-row1{
    padding: 10px 20px;
    background-color: #f5f5f5;
    box-sizing: border-box;
  }
  .report-info1{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    margin-right: 100px;
    float: left;
  }
  .report-row2-l{
    height: 385px;
  }
  .report-row2-r{
    padding: 40px 0;
  }
  .report-row2-r .r-item{
    margin: 45px 0;
    cursor: pointer;
  }
  .report-row2-r .r-item.active{
    font-weight: bold;
  }
  .report-row2-r .r-link{
    color: #009688;
  }
  .report-row4{
    padding: 40px 0;
    background-color: #f9f9f9;
  }
  .report-row4 .title{
    font-size: 20px;
    text-align: center;
    margin-bottom: 40px;
  }
  .report-row4-list{
    width: 640px;
    height: auto;
    margin: 0 auto;
  }
  .report-row4-item{
    width: 300px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    margin: 10px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 5px 10px #f0f0f0;
  }
  .report-row4-item .item-title{
    padding: 15px 50px;
    border-bottom: 1px solid #ebebeb;
  }
  .report-row4-item .item-bd{
    padding: 20px 50px;
    text-align: left;
  }
  .report-row4-item .bd-l{
    width: 120px;
    line-height: 32px;
    display: inline-block;
    vertical-align: middle;
  }
  .report-row4-item .bd-r{
    color: #999;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
  }
  .report-row4-item .item-icon{
    width: 12px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-right: 5px;
  }
  .report-row4-item .icon-up{
    height: 16px;
  }
  .report-row4-item .icon-down{
    height: 12px;
  }
  .report-row4-item .icon-up:before{
    width:0;
    height:0;
    content: "";
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid #5FB878;
    position: absolute;
    top: 0;
  }
  .report-row4-item .icon-up:after{
    width: 6px;
    height: 6px;
    content: "";
    background-color: #5FB878;
    display: inline-block;
    position: absolute;
    top: 6px;
    left: 3px;
  }
  .report-row4-item .icon-down:before{
    width:0;
    height:0;
    content: "";
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:6px solid #FF5722;
    position: absolute;
    bottom: 0;
  }
  .report-row4-item .icon-down:after{
    width: 6px;
    height: 6px;
    content: "";
    background-color: #FF5722;
    display: inline-block;
    position: absolute;
    bottom: 6px;
    left: 3px;
  }
  .report-row5{
    padding: 40px 0;
  }
  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header header header-demo"></div>
  <div class="layui-side layui-bg-black"></div>
  <!-- content start -->
  <div class="layui-body" style="padding-left: 10px;">
    <!-- *************** 分割线 ****************** -->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
      <legend>学员报告</legend>
    </fieldset>
    <div class="study-report-main">
      <input type="hidden" id="courseId" value="101">
      <div class="layui-row report-row1">
        <div class="layui-col-xs12">
          <div class="report-info1">
            <img src="http://file.lms.ruixinnj.com/image/user_avatar/pic008_1554278198.jpg" class="report-user-img" alt="">
            <strong>Jack</strong>
          </div>
          <div class="report-info1">
            <span style="margin-right: 50px">level：<strong>3</strong></span>
            <span>培训时长：<strong>1h10min</strong></span>
          </div>
          <div class="report-info1" style="float: right; margin-right: 0;">
            <a href="javascript:;" title="下载学员报告">
              <i class="layui-icon layui-icon-download-circle" style="margin-right: 0; font-size: 26px; font-weight: bold"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="layui-row report-row2">
        <div class="layui-col-xs8 report-row2-l" id="studentInfoChart"></div>
        <div class="layui-col-xs4 report-row2-r">
          <div class="r-item active" data-type="0"><a href="javascript:;" class="r-link">已参加课程：</a>15</div>
          <div class="r-item" data-type="1"><a href="javascript:;" class="r-link">完成课程：</a>2</div>
          <div class="r-item" data-type="2"><a href="javascript:;" class="r-link">进行中课程：</a>12</div>
          <div class="r-item" data-type="3"><a href="javascript:;" class="r-link">未开始课程：</a>1</div>
        </div>
      </div>
      <div class="report-row3">
        <table id="courseInfo"></table>
      </div>
      <div class="report-row4">
        <div class="title">关键指标</div>
        <ul class="layui-row report-row4-list">
          <li class="layui-col-xs6 report-row4-item">
            <div class="item-title">日</div>
            <div class="item-bd">
              <div class="bd-l">
                <p>学习数：3</p>
                <p>昨日：2</p>
              </div>
              <div class="bd-r">
                <i class="item-icon icon-up"></i>
                <span>50%</span>
              </div>
            </div>
          </li>
          <li class="layui-col-xs6 report-row4-item">
            <div class="item-title">周</div>
            <div class="item-bd">
              <div class="bd-l">
                <p>学习数：3</p>
                <p>上周：4</p>
              </div>
              <div class="bd-r">
                <i class="item-icon icon-down"></i>
                <span>50%</span>
              </div>
            </div>
          </li>
          <li class="layui-col-xs6 report-row4-item">
            <div class="item-title">月</div>
            <div class="item-bd">
              <div class="bd-l">
                <p>学习数：3</p>
                <p>上月：3</p>
              </div>
              <div class="bd-r">
                <i class="item-icon icon-up"></i>
                <span>- -</span>
              </div>
            </div>
          </li>
          <li class="layui-col-xs6 report-row4-item">
            <div class="item-title">年</div>
            <div class="item-bd">
              <div class="bd-l">
                <p>学习数：3</p>
                <p>去年：0</p>
              </div>
              <div class="bd-r">
                <i class="item-icon icon-down"></i>
                <span>- -</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="report-row5">
        <div id="studentCommitChart" style="height: 500px"></div>
      </div>
    </div>
    <!-- *************** 分割线 ****************** -->
  </div>
</div>
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script src="../dist/lib/echarts/echarts.min.js"></script>
<!-- 雷达图 -->
<script>
  var $studentInfoChart = echarts.init(document.getElementById('studentInfoChart'));
  var studentInfoOption = {
    tooltip: {},
    radar: [
      {
        indicator: [
          {text: '已参加课程', max: 100},
          {text: '完成课程', max: 100},
          {text: '进行中课程', max: 100},
          {text: '培训时长', max: 100},
          {text: 'level', max: 5}
        ],
        radius: 150,
        center: ['50%','55%'],
        name: {
          fontSize: 14,
          color: '#999'
        }
      }
    ],
    series: [
      {
        type: 'radar',
        tooltip: {
          trigger: 'item'
        },
        lineStyle: {
          width: 1
        },
        itemStyle: {normal: {areaStyle: {color: '#FF5722', opacity: .6}}},
        data: [
          {
            value: [60,73,20,50,3],
            name: '课程情况'
          }
        ]
      }
    ]
  };
  $studentInfoChart.setOption(studentInfoOption);
</script>
<!-- 折线图 -->
<script>
  var $studentCommitChart = echarts.init(document.getElementById('studentCommitChart'));
  var studentCommitOption = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data:['评论','点赞','转发']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2018/12/01','2018/12/01','2018/12/01','2018/12/01','2018/12/01','2018/12/01','2018/12/01']
    },
    yAxis: {
      type: 'value',
      name : '数量'
    },
    series: [
      {
        name:'评论',
        type:'line',
        color: '#393D49',
        lineStyle: {
          width: 1
        },
        data:[12, 4, 2, 8, 13, 17, 9]
      },
      {
        name:'点赞',
        type:'line',
        color: '#FF5722',
        lineStyle: {
          width: 1
        },
        data:[2, 14, 16, 2, 13, 12, 18]
      },
      {
        name:'转发',
        type:'line',
        color: '#009688',
        lineStyle: {
          width: 1
        },
        data:[6, 4, 8, 18, 5, 3, 19]
      }
    ]
  };
  $studentCommitChart.setOption(studentCommitOption);
</script>
<script>
  layui.use('table', function(){
    var table = layui.table;
    function initTable (url, type, titleName) {
      var tableIns  = table.render({
        elem: '#courseInfo'
        ,url: url
        ,method: 'post'
        ,page: true
        ,where: { id: $('#courseId').val(), type: type }
        ,cols: [[
          {field: 'courseName', title: titleName, align: 'center'}
          ,{field: 'progress', title: '进度', align: 'center'}
          ,{field: 'price', title: '购买金额', align: 'center'}
          ,{field: 'signTime', title: '注册时间', align: 'center', sort: true}
          ,{field: 'date', title: '完成日期', align: 'center', sort: true}
        ]]
      });
      return tableIns;
    }
    $('.report-row2').on('click', '.r-item', function (e) {
      var $this = $(this);
      $this.addClass('active').siblings().removeClass('active');
      $('#courseInfo').parent().css({opacity: 0});

      var _url = '../data/test.json';
      var _type = $this.data('type');
      var tableTitle = $this.find('.r-link').text().replace('：', '');

      initTable(_url, _type, tableTitle);
      $('#courseInfo').parent().animate({opacity: 1});
    });
    //初始化第一条
    $('.report-row2 .r-item').eq(0).click();
  });
</script>
</body>
</html>